<!--
 * @Description: 
 * @Author: yongLin
 * @Date: 2023-01-05 17:03:14
 * @LastEditTime: 2023-01-09 15:38:51
 * @LastEditors: yongLin
-->
<template>
	<view class="info">
		<view class="card">
			<view class="c-title">园区信息</view>
			<view class="c-content">
				<view class="cell">
					<view class="cell-left">位置：广东佛山</view>
					<view class="cell-right">园区级别：国家级别</view>
				</view>
				<view class="cell">
					<view class="cell-left">园区类型：金融综合改革试验区</view>
					<view class="cell-right">开园日期：2022-12-21</view>
				</view>
				<view class="cell">
					<view class="cell-left">占地面积：3.5㎡</view>
					<view class="cell-right">容积率：3.5</view>
				</view>
				<view class="cell">
					<view class="cell-left">楼宇数量:123</view>
					<view class="cell-right">车位数量：9999</view>
				</view>
				<view class="cell">
					<view class="cell-text">业主：佛山市绿岛湖投资有限公司</view>
				</view>
				<view class="cell">
					<view class="cell-text">物管：佛山碧桂园集团</view>
				</view>
				<view class="cell">
					<view class="cell-left">水费标准：0.35m³</view>
					<view class="cell-right">燃气费：0.56m³</view>
				</view>
				<view class="cell">
					<view class="cell-left">电费（一档）:0.65元/度</view>
					<view class="cell-left">电费（二档）:0.65元/度</view>
				</view>
				<view class="cell" style="border: none">
					<view class="cell-left">电费（三档）:0.65元/度</view>
					<view class="cell-left">物管费标准:1.3元/㎡/月</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="c-title">停车收费</view>
			<view class="c-content">
				<u-empty v-if="!info.picList.length" icon="../../../../static/icon_empty_01.png" text="暂无内容" />
				<view class="info-img" v-for="(item, i) in info.picList" :key="i">
					<u-image :src="item" width="100%" height="300rpx" style="margin-bottom: 20rpx">
						<view slot="error" style="font-size: 24rpx">加载失败</view>
					</u-image>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="c-title">园区介绍</view>
			<view class="c-content">
				<u-empty v-if="!info.introduce" icon="../../../../static/icon_empty_01.png" text="暂无园区内容介绍" />
				<u-parse v-else :content="info.introduce"></u-parse>
			</view>
		</view>
		<view class="card">
			<view class="c-title">配套设施</view>
			<view class="c-content">
				<u-empty v-if="!info.facility.length" icon="../../../../static/icon_empty_01.png" text="暂无内容" />
				<view class="info-facility">
					<view class="f-item" v-for="(item, i) in info.facility" :key="i">
						<image :src="item.pic" />
						<text class="f-item-text">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="c-header">
				<view class="h-title">业态占比</view>
				<view class="picker-button" @click="isShowPicker = true">
					<text>统计范围</text>
					<u-icon name="arrow-down" color="#fff" size="14"></u-icon>
				</view>
			</view>
			<view class="c-content">
				<view class="charts-pie">
					<qiun-data-charts v-if="!isShowPicker" type="pie" :opts="opts" :chartData="info.chartData" />
				</view>
			</view>
		</view>
		<view class="card">
			<view class="c-title">位置及周边</view>
			<view class="c-content">
				<view class="map">
					<view class="map-address" @click="getLocation">
						<u-icon name="map" color="#2489ff"></u-icon>
						<text class="a-text">园区地址：佛山碧桂园集团</text>
						<text class="a-text a-text--btn">立即前往</text>
					</view>
					<map style="width: 100%; height: 562rpx" :latitude="map.latitude" :longitude="map.longitude"
						:markers="map.covers" />
				</view>
			</view>
		</view>
		<view class="card">
			<view class="c-title">联系方式</view>
			<view class="c-content">
				<view class="map">
					<view class="cell">
						<view class="cell-text">联系电话：0733-3333333</view>
					</view>
					<view class="cell">
						<view class="cell-text">邮箱地址：zongfi@sss.com</view>
					</view>
					<view class="cell" style="border: none">
						<view class="cell-text">招商中心地址：佛山碧桂园集团</view>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="isShowPicker" keyName="name" :columns="columns" @confirm="handlePickerConfirm"
			@cancel="isShowPicker = false"></u-picker>
	</view>
</template>

<script>
	import Map from "@/components/Map";
	export default {
		components: {
			Map
		},
		data() {
			return {
				isShowPicker: false,
				columns: [
					[{
						name: "全园区"
					}, {
						name: "元海创业中心"
					}]
				],
				opts: {
					color: [
						"#1890FF",
						"#91CB74",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc",
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF",
						},
					},
				},
				map: {
					latitude: null,
					longitude: null,
					covers: [],
				},
				info: {
					picList: [
						"https://cdn.uviewui.com/uview/album/1.jpg",
						"https://cdn.uviewui.com/uview/album/1.jpg",
					],
					introduce: "",
					facility: [{
							pic: "https://cdn.uviewui.com/uview/album/1.jpg",
							name: "中央空调",
						},
						{
							pic: "https://cdn.uviewui.com/uview/album/1.jpg",
							name: "消防设施",
						},
						{
							pic: "https://cdn.uviewui.com/uview/album/1.jpg",
							name: "照明设备",
						},
					],
					chartData: {
						series: [{
							data: [{
									name: "交通运输",
									value: 50
								},
								{
									name: "医药制造业",
									value: 30
								},
								{
									name: "橡胶和塑料制造业",
									value: 20
								},
								{
									name: "非金属矿物制品业",
									value: 18
								},
								{
									name: "仓储业",
									value: 8
								},
							],
						}, ],
					},
				},
			};
		},
		methods: {
			handlePickerConfirm() {
				this.isShowPicker = false;
			},
			getLocation() {
				const _this = this;
				uni.authorize({
					scope: "scope.userLocation",
					success() {
						uni.getLocation({
							type: "gcj02",
							success: function(res) {
								_this.map.longitude = res.longitude;
								_this.map.latitude = res.latitude;
								const latitude = res.latitude;
								const longitude = res.longitude;
								uni.openLocation({
									latitude: latitude,
									longitude: longitude,
									success: function() {
										console.log("success");
									},
								});
							},
						});
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.info {
		.card {
			width: 100%;
			padding: 32rpx;
			background-color: #fff;
			margin-top: 30rpx;

			.c-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				margin-bottom: 30rpx;
				.h-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333444;
				}
				.picker-button {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 180rpx;
					height: 60rpx;
					color: #fff;
					font-size: 24rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 8rpx;
					background-color: #3894ff;

					text {
						margin-right: 10rpx;
					}
				}
			}

			.c-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333444;
				margin-bottom: 30rpx;
			}

			.c-content {
				font-size: 26rpx;
				font-weight: 500;
				color: #888999;
				line-height: 36rpx;
			}
		}

		.cell {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			border-bottom: 1rpx solid #ccc;

			&-left {
				width: 50%;
			}

			&-right {
				width: 50%;
				text-align: left;
			}
		}

		.info-img {
			margin-bottom: 30rpx;
		}

		.info-facility {
			display: grid;
			grid-template-columns: repeat(3, 33%);

			.f-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				&-text {
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
		}

		.charts-pie {
			width: 100%;
			height: 400rpx;
		}

		.map {
			.map-address {
				display: flex;
				margin-bottom: 30rpx;

				.a-text {
					font-size: 28rpx;

					&--btn {
						color: #096dd9;
						border-bottom: 1rpx solid #096dd9;
					}
				}
			}
		}
	}
</style>
